<template>
  <div>
    <el-card style="margin-bottom: 100px">
      <!-- 表格上部搜索，新增仓库区 -->

      <el-select
        style="margin-right: 10px"
        v-model="selectBranchId"
        placeholder="选择部门"
        @change="getGroupListByBranchId(selectBranchId)"
      >
        <el-option
          v-for="item in branchList"
          :key="item.id"
          :label="item.branch_name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        style="margin-right: 10px"
        v-model="selectGroupId"
        placeholder="选择小组"
      >
        <el-option
          v-for="item in groupList"
          :key="item.groupId"
          :label="item.group_name"
          :value="item.groupId"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="getTableData(selectGroupId)"
        >按组查询</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addDialogVisible = true"
        >新增规则</el-button
      >
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="filter_ruler" label="规则"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column
          prop="update_time"
          label="上一次更新时间"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              @click="openEditDialog(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteFilterRuler(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--新增过滤规则-->
    <el-dialog
      title="新增过滤规则"
      :visible.sync="addDialogVisible"
      width="30%"
    >
      <el-form
        ref="addFilterRulerForm"
        :model="addFilterRulerFormData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="所属部门" prop="selectBranchId">
          <el-select
            style="width: 100%"
            v-model="addFilterRulerFormData.selectBranchId"
            placeholder="选择部门"
            @change="
              getGroupListByBranchIdInDialog(
                addFilterRulerFormData.selectBranchId
              )
            "
          >
            <el-option
              v-for="item in branchList"
              :key="item.id"
              :label="item.branch_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属小组" prop="selectGroupId">
          <el-select
            style="width: 100%"
            v-model="addFilterRulerFormData.selectGroupId"
            placeholder="选择小组"
          >
            <el-option
              v-for="item in DialogGroupList"
              :key="item.groupId"
              :label="item.group_name"
              :value="item.groupId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="过滤规则" prop="filterRuler">
          <el-input v-model="addFilterRulerFormData.filterRuler"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addFilterRulerForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('addFilterRulerForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--编辑过滤规则-->
    <el-dialog
      title="编辑过滤规则"
      :visible.sync="editDialogVisible"
      width="30%"
    >
      <el-form
        ref="editFilterRulerForm"
        :model="editFilterRulerFormData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="所属部门" prop="selectBranchId">
          <el-select
            style="width: 100%"
            v-model="editFilterRulerFormData.selectBranchId"
            placeholder="选择部门"
            @change="
              getGroupListByBranchIdInDialog(
                editFilterRulerFormData.selectBranchId
              )
            "
          >
            <el-option
              v-for="item in branchList"
              :key="item.id"
              :label="item.branch_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属小组" prop="selectGroupId">
          <el-select
            style="width: 100%"
            v-model="editFilterRulerFormData.selectGroupId"
            placeholder="选择小组"
          >
            <el-option
              v-for="item in DialogGroupList"
              :key="item.groupId"
              :label="item.group_name"
              :value="item.groupId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="过滤规则" prop="filterRuler">
          <el-input v-model="editFilterRulerFormData.filterRuler"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('editFilterRulerForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('editFilterRulerForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getBranchList, getGroupListByBranchId } from '@/api/repos';
import {
  addFilterRuler,
  deleteFilterRulerList,
  editFilterRulerList,
  getFilterRulerList,
} from '@/api/filterRuler';

export default {
  created() {
    this.getBranchList();
  },
  data() {
    return {
      selectBranchId: null,
      branchList: [],
      selectGroupId: null,
      groupList: [],

      tableData: null,

      DialogGroupList: [],
      addDialogVisible: false,
      addFilterRulerFormData: {
        selectBranchId: null,
        selectGroupId: null,
        filterRuler: null,
      },
      editDialogVisible: false,
      editFilterRulerFormData: {
        rid: null,
        selectBranchId: null,
        selectGroupId: null,
        filterRuler: null,
      },
      rules: {
        selectBranchId: {
          required: true,
          message: '请选择所属部门',
          trigger: 'blur',
        },
        selectGroupId: {
          required: true,
          message: '请选择所属小组',
          trigger: 'blur',
        },
        filterRuler: {
          required: true,
          message: '请输入过滤规则',
          trigger: 'blur',
        },
      },
    };
  },
  methods: {
    async getBranchList() {
      const { teams } = await getBranchList();
      this.branchList = teams;
    },
    async getGroupListByBranchId(branchId) {
      this.groupList = [];
      this.selectGroupId = null;
      const { teams } = await getGroupListByBranchId(branchId);
      this.groupList = teams;
    },
    async getGroupListByBranchIdInDialog(branchId) {
      this.DialogGroupList = [];
      this.addFilterRulerFormData.selectGroupId = null;
      const { teams } = await getGroupListByBranchId(branchId);
      this.DialogGroupList = teams;
    },
    async getTableData(groupId) {
      console.log('getTableData --> ', groupId);
      if (groupId) {
        this.tableData = await getFilterRulerList(groupId);
      } else {
        this.$message.error('请先选择小组');
      }
    },
    async deleteFilterRuler(row) {
      console.log('deleteFilterRuler --> ', row);
      const { filterId } = row;
      try {
        await deleteFilterRulerList(filterId);
        this.$message.success('删除成功');
        this.getTableData(this.selectGroupId);
      } catch (err) {
        this.$message.error(err);
        return;
      }
    },
    async addFilterRuler() {
      const { selectGroupId: groupId, filterRuler } =
        this.addFilterRulerFormData;
      try {
        await addFilterRuler({
          groupId,
          filterRuler,
        });
        this.$message.success('添加成功');
        this.addDialogVisible = false;
        this.resetForm('addFilterRulerForm');
      } catch (err) {
        this.$message.error(err);
        return;
      }
    },
    async editFilterRuler() {
      const { filterId, selectGroupId, filterRuler } =
        this.editFilterRulerFormData;
      try {
        await editFilterRulerList({
          rid: filterId,
          groupId: selectGroupId,
          filterRuler,
        });
        this.$message.success('修改成功');
        this.editDialogVisible = false;
        this.resetForm('editFilterRulerForm');
      } catch (err) {
        this.$message.error(err);
      }
    },
    async openEditDialog(row) {
      console.log('openEditDialog --> ', row);
      const { branch_id, group_id, filter_ruler, filterId } = row;
      await this.getGroupListByBranchIdInDialog(branch_id);

      this.editFilterRulerFormData = {
        filterId,
        selectBranchId: branch_id,
        selectGroupId: group_id,
        filterRuler: filter_ruler,
      };
      this.editDialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName === 'addFilterRulerForm') {
            this.addFilterRuler();
          }
          if (formName === 'editFilterRulerForm') {
            this.editFilterRuler();
          }
        } else {
          console.log('表单校验失败');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.addDialogVisible = false;
      this.editDialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.line {
  text-align: center;
}
</style>
